<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作业</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 按钮 -->
    <div style="padding:20px">
        <!-- 启动模态框 -->
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="add">新增</button>
        <button class="btn btn-primary" id="bianji">编辑</button>
        <button class="btn btn-primary" id="del">删除</button>
        <button class="btn btn-primary" id="query">查询</button>
        <!-- 如果工号和姓名都有，工号优先。否则谁有谁优先 -->
        <input  class="" type="text" placeholder="按工号查询" id="num"/>
        <input  class="" type="text" placeholder="按姓名查询" id="na"/>
    </div>
    <!-- 表格，默认里面给了四条数据 -->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    <label>1001</label>
                </td>
                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>女</label>
                </td>
                <td>
                    <label>1234</label>
                </td>
                <td>
                    <label>29</label>
                </td>
                <td>
                    <label>1991-1-1</label>
                </td>
            </tr>
            <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>
                        <label>1002</label>
                    </td>
                    <td>
                        <label>李四</label>
                    </td>
                    <td>
                        <label>男</label>
                    </td>
                    <td>
                        <label>1234</label>
                    </td>
                    <td>
                        <label>28</label>
                    </td>
                    <td>
                        <label>1991-2-2</label>
                    </td>
            </tr>
            <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>
                        <label>1003</label>
                    </td>
                    <td>
                        <label>王五</label>
                    </td>
                    <td>
                        <label>男</label>
                    </td>
                    <td>
                        <label>1234</label>
                    </td>
                    <td>
                        <label>28</label>
                    </td>
                    <td>
                        <label>1991-3-3</label>
                    </td>
            </tr>
            <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>
                        <label>1004</label>
                    </td>
                    <td>
                        <label>赵六</label>
                    </td>
                    <td>
                        <label>男</label>
                    </td>
                    <td>
                        <label>1234</label>
                    </td>
                    <td>
                        <label>28</label>
                    </td>
                    <td>
                        <label>1991-4-4</label>
                    </td>
            </tr>
        </tbody>
    </table>
    <!-- 添加模态框 -->
    <div class="modal" id="myModal" data-backdrop="static">
         <!-- 窗口声明 -->
         <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                  <!-- 1.框的标题 -->  
                  <div class="modal-header">
                        <button class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">添加信息</h4>
                  </div>
                  <!-- 2.框内信息 -->
                  <div class="modal-boby">
                      <!-- 给form表单添加id属性 -->
                        <form id="f1">
                            <div class="form-group">
                                <label>工号</label>
                                <input type="text" placeholder="工号"  id="wnum" class="form-control" value=""/>
                            </div>
                            <div class="form-group">
                                <label>姓名</label>
                                <input type="text" placeholder="姓名"  id="name" class="form-control" value=""/>
                            </div>
                            <div class="form-group">
                                <label>性别</label>
                                <input type="text" placeholder="性别" id="sex" class="form-control" value=""/>
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" placeholder="密码" id="psw" class="form-control" value=""/>
                            </div>
                            <div class="form-group">
                                <label>年龄</label>
                                <input type="text" placeholder="年龄" id="age" class="form-control" value=""/>
                            </div>
                            <div class="form-group">
                                <label>日期</label>
                                <input type="datetime" placeholder="yyyy-MM-dd" id="date" class="form-control" value=""/>
                            </div>
                        </form>
                  </div>
                   <!-- 3.框的按钮 -->
                  <div class="modal-footer">
                        <button class="btn btn-info" id="queding" data-dismiss="modal">确定</button>
                        <button class="btn btn-info" id="update" data-dismiss="modal">修改</button>
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                  </div>
            </div>
         </div>
    </div>
</body>
<!-- 引入js文件 -->
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    // 奇数行和偶数行变色
    $("tbody>tr:odd").prop("class","warning ");
    $("tbody>tr:even").prop("class","info");
    //点击某一行，相当于自动点击复选框（动态生成的元素除外）
    $("tbody>tr").click(function(){
        $(this).children("td:first").children("input:first").get(0).click();
    });
    //添加信息校验
    function check(){
        var n = $("#wnum").val();
        var name =$("#name").val();
        var sex =$("#sex").val();
        var psw =$("#psw").val();
        var age = $("#age").val();
        var date = $("#date").val();
        if(n=="" || n.length!=4){
            alert("用户id不能为空，且为4位，不能重复!");
            return false;
        }else if(name==""){
            alert("用户名不能为空!");
            return false;
        }else if(sex != "男" && sex != "女"){
            alert("性别有误，且能为男或女!");
            return false;
        }else if(psw=="" || psw.length<8){
            alert("密码不为空，且长度大于等于8!");
            return false;
        }else if(age =="" || age<0 ||age >125){
            alert("年龄不为空，且必须合理!");
            return false;
        }else if(date == ""){
            alert("日期不为空!");
            return false;
        }
        return true;
    }
    // 确定添加按钮，动态添加相关信息，用字符串接收，然后追加到tbody里
    $("#queding").click(function(){
        if(check()){
         var a = 0;
        var str = "<tr><td><input type='checkbox'/></td>";
         var sumstr="";
         sumstr+=str;
        var v1 = $("#f1").find("input").each(function(){
            str = "<td><label>"+$(this).val()+"</label></td>";
            if(a == 5){
                str="<td><label>"+$(this).val()+"</label></td></tr>";
            }
            sumstr+=str;
            a++;
        });
         $("tbody").append(sumstr);
        //变色
         $("tbody>tr:odd").prop("class","warning ");
        $("tbody>tr:even").prop("class","info");
        }
    });
    //删除按钮，删除被选中的那一行，用remove删除
    $("#del").click(function(){
        $("tbody>tr").find("input:first").each(function(){
            if($(this).is(":checked") == true){
                $(this).parents("tr").remove();
            }
        });
    });
    //编辑按钮，先查询出被选那一行的数据用数组存储，然后在模态框里相应位置设值
    $("#bianji").click(function(){
        var ary = new Array(6);
        var i = 0;
        if($("tbody>tr").find("input:first:checked").length > 1){
            alert("编辑一次只能选一个！");
        }
        $("tbody>tr").find("input:first").each(function(){
            if($(this).is(":checked") == true){
                $(this).parents("tr").find("label").each(function(){
                    ary[i]=$(this).text();
                    i++;
                });
                i = 0;
                $("#f1").find("input").each(function(){
                    $(this).prop("value",ary[i]);
                    i++;
                });
                $("#add").click();
            }
        });
    });
    //更新按钮，先查询出被选那一行的数据用数组存储，然后在模态框里相应位置设值，然后进行改动，保存
    $("#update").click(function(){
        var ary = new Array(6);
        var i = 0; 
        $("#f1").find("input").each(function(){
            ary[i]=$(this).val();
            i++;
        });
        i = 0;
        $("tbody>tr").find("label:first").each(function(){
             if($(this).text() == $("#f1>div:first>input").val()){
                $(this).parents("tr").find("label").each(function(){
                    $(this).html(ary[i]);
                    i++;
                });
             }
        });
    });
    //查询按钮，先获得工号和姓名两个搜索框里是否有值，然后遍历查询，是否又符合要求的，有的话在模态框里显示（工号优先）
    $("#query").click(function(){

        var ary = new Array(6);
        var i = 0; 
        var num = $("#num").val();
        var name = $("#na").val();
        if(num != ""){
           $("tbody").find("tr").find("label:first").each(function(){
               if(num == $(this).text()){
                $(this).parents("tr").find("label").each(function(){
                    ary[i] = $(this).text();
                    i++;
                });
                i = 0;
                $("#f1").find("input").each(function(){
                    $(this).prop("value",ary[i]);
                    i++;
                });
                $("#add").click();
               }
           });
        }else if(name != ""){
            $("tbody").find("tr").find("td:first").each(function(){
               if(name == $(this).next().next().text().trim()){
                $(this).parents("tr").find("label").each(function(){
                    ary[i] = $(this).text();
                    i++;
                });
                i = 0;
                $("#f1").find("input").each(function(){
                    $(this).prop("value",ary[i]);
                    i++;
                });
                $("#add").click();
               }
           });
        }
    });
</script>
</html>